<template>
  <div class="type_factory" id="type_factory">
    <div class="create_type_body" id="create_type_body">
      <div class="create_select cursorPointer" id="create_type">
        <input
          aria-autocomplete="none"
          type="text"
          class="create_value create_type_center disnone"
          id="create_type_value"
        />
        <span class="hold_space" id="hold_type"></span>
      </div>
    </div>
    <div class="online_typeArr" id="online_relevance_typeArr"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

import {
  endsTimeAnimation,
  settimeNth,
  elViewPosition,
  removeClass,
  domTree,
} from '../../../../../global/global';

import { listenCssVar } from '../../../../../global/cssVarPropsFunc/listenCssVar';

import { selectTypeAnima } from '../fromtableuni/fileType';

let cssVarObj;

onMounted(() => {
  let createTypeEl = document.getElementById('create_type');
  createTypeEl.addEventListener('click', CreateTypeH);

  cssVarObj = listenCssVar(createTypeEl);
  init();
});

function init() {
  let createTypeEl = document.getElementById('create_type');

  let createTypeInpEl = document.getElementById('create_type_value');
  let holdTypeEl = document.getElementById('hold_type');

  //添加 鼠标 手指 class
  //   createTypeEl.classList.contains('cursorPointer')
  //     ? undefined
  //     : createTypeEl.classList.add('cursorPointer');

  removeClass(createTypeEl, 'cursorPointer', true);

  //添加 active 属性 激活 ::before
  createTypeEl.hasAttribute('active')
    ? createTypeEl.removeAttribute('active')
    : undefined;

  createTypeInpEl.addEventListener('keydown', keydownInpH);

  //显示 input 元素
  //   createTypeInpEl.classList.contains('disnone')
  //     ? undefined
  //     : createTypeInpEl.classList.add('disnone');

  removeClass(createTypeInpEl, 'disnone', true);

  //置空 input 元素 内容
  createTypeInpEl.value = '';

  //显示 span 元素
  //   holdTypeEl.classList.contains('disnone')
  //     ? undefined
  //     : holdTypeEl.classList.add('disnone');

  removeClass(holdTypeEl, 'disnone', true);

  //置空 span 元素 内容
  holdTypeEl.innerText = '';

  cssVarObj.setCssVar('--enterWidth', '0px');
  cssVarObj.setCssVar('--defaultWidth', '30px');

  //删除 空白展位 元素
  let blankSpaceEl = document.getElementById('blank_space');
  if (
    blankSpaceEl != undefined
      ? blankSpaceEl.nodeType == 1
        ? !blankSpaceEl.classList.contains('space_expand')
          ? true
          : false
        : false
      : false
  ) {
    blankSpaceEl.remove();
  }
}

function CreateTypeH(event) {
  //僅限 create_type 元素 點擊事件
  if (event.target.id != 'create_type') {
    return false;
  }
  console.log(event.target.id);
  let el = event.target;

  if (!el.hasAttribute('active')) {
    //設置 初始狀態?
    el.setAttribute('active', 'start');

    console.log('開始 active');

    startToActive();
  } else {
    // 狀態 綫 start <==> [pause] ==> wait ==> start

    // //激活 狀態?
    // if (el.getAttribute("active")=="start") {

    // }

    //等待 狀態?
    if (el.getAttribute('active') == 'wait') {
      //替換 等待 -- 激活 狀態
      el.setAttribute('active', 'start');

      console.log('等待 轉到 激活?');
      startToActive();
    }

    //暫停 狀態?
    if (el.getAttribute('active') == 'pause') {
      //替換 暫停 -- 激活 狀態?
      el.setAttribute('active', 'start');

      console.log('暫停 轉到 激活');
    }
  }
}

function startToActive() {
  /**
   * 取消 createinput 定位 div 的 .cursorPointer {cursor：pointer}
   */
  let createTypeEl = document.getElementById('create_type');
  //   if (createTypeEl.classList.contains('cursorPointer')) {
  //     createTypeEl.classList.remove('cursorPointer');
  //   }
  removeClass(createTypeEl, 'cursorPointer');
  /**
   * 展示 input 選項 #create_type_value -- remove .disnone
   * 聚焦 input 選項 -- el.fcous()
   * 添加 input 入場動畫 -- ends
   */
  let inpEl = document.getElementById('create_type_value');
  //   inpEl.classList.remove('disnone');

  //   inpEl.focus();

  endsTimeAnimation(inpEl, 'disnone', 100);
  endsTimeAnimation(inpEl, 'activeInput', 200);

  settimeNth([0, 200, 0, 0], () => {
    // let create_BeforeEl = document.getElementById('create_type');
    // inpEl.classList.remove("disnone")
    // console.log('inpel 聚焦');
    inpEl.setAttribute('enter', 'active');
    // inpEl.value = '1';
    inpEl.focus();
  });
}

function keydownInpH(event) {
  //-- create_type inp Element
  console.log(event);
  //在 keyCode== enter[13] 時 啓用enterCreateType 動作
  if (event.keyCode == 13) {
    //確認狀態 修改
    event.target.setAttribute('enter', 'true');
    if (event.target.value == '') {
      init();
    } else {
      enterCreateType(event.target.value);
    }
  }
  if (event.keyCode == 27) {
    // if (event.target.value == '') {
    init();
    // }
  }
}

/**
 * 創建 Type 動畫
 * @param {string} typeValue input内的value
 */
function enterCreateType(typeValue) {
  //   console.log(typeValue);
  let holdTypeEl = document.getElementById('hold_type');
  holdTypeEl.innerText = typeValue;
  //   holdTypeEl.classList.contains('disnone')
  //     ? holdTypeEl.classList.remove('disnone')
  //     : undefined;

  removeClass(holdTypeEl, 'disnone');

  let comHoldType = window.getComputedStyle(holdTypeEl);

  let createTypeInpEl = document.getElementById('create_type_value');

  //更改 enter : enter  && 取消聚焦
  createTypeInpEl.parentNode.setAttribute('active', 'enter');
  createTypeInpEl.blur();
  //   createTypeInpEl.classList.add('disnone');

  removeClass(createTypeInpEl, 'disnone', true);

  //
  cssVarObj.setCssVar('--enterWidth', `${comHoldType.width}`);
  cssVarObj.setCssVar('--defaultWidth', '30px');

  let whiteSpaceDomData = {
    queue: ['acb'],
    acb: {
      tag: 'div',
      props: ['classList', 'id'],
      classList: ['blank_space'],
      id: 'blank_space',
    },
  };

  let whiteSpaceEl = domTree(undefined, whiteSpaceDomData);
  //   console.log(whiteSpaceEl);
  createTypeInpEl.parentNode.parentNode.insertBefore(
    whiteSpaceEl,
    createTypeInpEl.parentNode
  );

  avanda();

  function avanda() {
    // let createTypeBodyEl = document.getElementById('create_typeBody');

    // let createTypeEl = document.getElementById('create_type');
    let domData = {
      queue: ['a'],
      a: {
        tag: 'div', //-- tag 標簽屬性類型 可以進行自定義
        queue: ['a_a'], //-- data 屬性一般順序 filter 可以進行干預
        props: ['classList', 'id'],
        id: `selected_type_${typeValue}`,
        events: ['click'],
        classList: ['bunt', 'selected'],
        attribute: ['value'],
        click: newTypeH,
        value: typeValue,
        a_a: {
          tag: 'span',
          props: ['innerHTML'],
          innerHTML: typeValue,
        },
      },
    };
    let NewTypeEl = domTree(undefined, domData);

    console.log(NewTypeEl);

    let delayTime = 0;
    let lateDrop = 0;
    let growthtime = endsTimeAnimation(whiteSpaceEl, 'space_expand', 0, false);

    console.log(eval(growthtime + delayTime - lateDrop));
    settimeNth([eval(growthtime + delayTime - lateDrop), 10, 0], () => {
      let reduceTime = endsTimeAnimation(
        whiteSpaceEl,
        'reduce_expand',
        0,
        false
      );

      let positionAb = elViewPosition(holdTypeEl);

      let consertStyle = `font-family: Avenir, Helvetica, Arial, sans-serif; font-size: 20px; position: absolute;width: ${positionAb['width']}px; height: ${positionAb['height']}px; left: ${positionAb['left']}px; top: ${positionAb['top']}px`;

      NewTypeEl.style = consertStyle;
      //   console.log(consertStyle);

      document.body.appendChild(NewTypeEl);

      init();
      settimeNth([eval(reduceTime), 10, 0], () => {
        whiteSpaceEl.remove();
      });
    });
  }
}

function newTypeH(event) {
  selectTypeAnima(event);
  event.target.parentNode.remove();
}
</script>

<style scoped lang="scss">
.type_factory {
  display: flex;
}
.create_type_body {
  display: flex;
  border-radius: 10px;
  background-color: #808080;
}
.create_select {
  display: flex;

  justify-content: center;
  align-items: center;

  position: relative;

  width: calc(var(--defaultWidth) + var(--enterWidth) * 1.1);
  height: 50px;

  padding: 5px;

  //   border-radius: 10px;
  //   background-color: #808080;
  transition: width 0.1s ease-in-out 0.1s;
}
.create_select[active='start'],
.create_select[active='pause'] {
  /* 	position: relative;
	cursor: pointer; */
  width: 200px;
  /* 	height: 50px;
	border-radius: 10px;
	background-color: #808080; */
}

.create_select[active='start']::before,
.create_select[active='enter']::before {
  transform: scale(0.5);
  opacity: 0;
  width: 0px;
}

.create_select::before {
  content: '+';
  width: 10px;

  position: absolute;

  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 5px), -50%);
  transition: all 0.1s ease-in-out 0.1s;
}

.create_type_center {
  position: absolute;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#create_type_value {
  font-size: 20px;
  z-index: 2;
}

#hold_type {
  font-size: 20px;
  z-index: 1;
}

.create_value {
  width: 90%;
  height: 30px;
  outline: none;
  border: none;
  background-color: #0000002f;
  border-radius: 2.5px;

  border-bottom: 2px solid #03e9f4;

  //   line-height: 0;

  transition: width 0.1s ease-in-out 0.1s;
}

.hold_space {
  padding: 20px 0;
}
</style>

<style>
.bunt {
  min-width: 60px;
  height: 50px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.bunt span {
  display: inline-block;
  cursor: pointer;

  vertical-align: middle;
  text-align: center;
}
.bunt span:hover {
  color: blueviolet;
  transition: color 0.1s ease-in-out 0.1s;
}

.blank_space {
  cursor: default;
  /* display: inline-block; */
  /* transition: width 2s ease-in-out 0.1s; */
}

.space_expand {
  animation-name: expandSpace;

  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  /* animation-delay: 0.2s; */
  animation-fill-mode: forwards;
}

.reduce_expand {
  animation-name: reduceSpace;

  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  /* animation-delay: 0.2s; */
  animation-fill-mode: forwards;
}

@keyframes expandSpace {
  0% {
    min-width: 0px;
  }
  100% {
    min-width: 30px;
  }
}

@keyframes reduceSpace {
  0% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
</style>
